<template>
    <div>
        <div class="font-20 mar-x-20 mar-t-20">消息中心</div>
		<Lines h="1px" w="100%" bg="#E6E8EB" class="mar-t-20" />
        <div class="mar-x-20 mar-t-10">
            <el-table v-loading="tableLoading" ref="tables" border :data="tableData">
                <el-table-column type="selection" width="50" align="center"></el-table-column>

                <template>
                    <el-table-column v-for="(item, index) in theadArr" :key="index" :label="item.label" :props="item.prop" :width="item.width" :align="item.align">
                        <template slot-scope="{ row }">
                            <div v-if="item.prop === 'isRead'" :class="row.isRead ? 'color-1e80ff' : 'color-ff0000'">
                                {{ row[item.prop] === 1 ? '已读' : '未读' }}
                            </div>

                            <div v-else-if="item.prop === 'state'" :class="row.state ? 'color-1e80ff' : 'color-ff0000'">
                                {{ row[item.prop] === 1 ? '已处理' : '未处理' }}
                            </div>

                            <div v-else>{{ row[item.prop] }}</div>
                        </template>
                    </el-table-column>
                </template>

                <el-table-column label="操作" width="200" align="center">
                    <template slot-scope="{ row }">
                        <div>
                            <span v-if="row.state === 0" class="cur-pointer mar-r-20 color-1e80ff">查看</span>
                            <span class="cur-pointer color-ff0000">删除</span>
                        </div>
                    </template>
                </el-table-column>
            </el-table>

            <div class="flex justify-center mar-t-20">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="pageSizes"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import Lines from '@/components/Lines/index'

    export default {
        components: {
            Lines,
        },

        data() {
            return {
                // 表格
                theadArr: [
                    { prop: "type", label: "消息类型", width: null, align: "center", },
                    { prop: "content", label: "内容", width: null, align: "center" },
                    { prop: "isRead", label: "是否已读", width: 180, align: "center" },
                    { prop: "state", label: "状态", width: 180, align: "center" },
                ],
                tableData: [
                    {
                        id: 101,
                        type: "系统消息",
                        content: "系统消息内容",
                        isRead: 1,
                        state: 1,
                    },
                    {
                        id: 102,
                        type: "系个人息",
                        content: "个人消息内容",
                        isRead: 0,
                        state: 0,
                    }
                ],
                tableLoading: false,
                pageSizes: [10, 20, 50, 100],
                pageSize: 10,
                currentPage: 1,
                total: 0,

            }
        },

        methods: {
            // 改变状态
            handleDisable(row) {
                console.log(row)
            },

            // pageSize 改变时的回调
            handleSizeChange(val) {
                this.pageSize = val
            },

            // currentPage 改变时的回调
            handleCurrentChange(val) {
                this.currentPage = val
            },
        },
    }
</script>

<style lang="scss" scoped>

</style>